<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card>
        <el-input style="width: 80%" placeholder="请输入关键词" v-model="filterText">
          <template #append>
            <el-button icon="Search"></el-button>
          </template>
        </el-input>
        <el-tree 
        ref="treeRef" 
        :data="treeData" 
        style="max-width: 600px;" 
        :props="defaultProps" 
        class="mt" 
        :filter-node-method="filterNode" 
        @node-click="handleNodeClick">
        </el-tree>
      </el-card>
    </el-col>
    <el-col :span="18">
      <el-card>
        <template #header>
          <div class="card-header">
            <h3 v-if="title" style="text-align: center;">{{ title }}:计费模板</h3>
            <h3 v-else style="text-align: center;color:red">请先在左侧选择充电站</h3>
          </div>
        </template>
        <el-form 
        ref="ruleFormRef" 
        :model="ruleForm" 
        :rules="rules" 
        label-width="auto"
        >
          <el-form-item label="模板名称:" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入模板名称" style="max-width: 200px;" :disabled="!title" />
          </el-form-item>
          <el-form-item :label="'时间区间' + (index + 1) + ':'" v-for="(timeSlot, index) in ruleForm.date" :key="index">
            <el-col :span="8">
              <el-form-item label="开始时间" :prop="'date.' + index + '.date1'"
                :rules="{ required: true, message: '开始时间不能为空', trigger: 'blur' }">
                <!--date.0.date1底层逻辑转化为ruleForm.date[0].date1--> 
                <el-time-picker value-format="hh:mm:ss" v-model="timeSlot.date1" placeholder="选择开始时间" :disabled="!title"
                  style="width:100%" />
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <span class="ml">--</span>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束时间" :prop="'date.' + index + '.date2'" 
                :rules="{ required: true, message: '结束时间不能为空', trigger: 'blur' }">
                <el-time-picker value-format="hh:mm:ss" v-model="timeSlot.date2" placeholder="选择结束时间" :disabled="!title"
                  style="width:100%" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电费" :prop="'date.' + index + '.electricity'"
                :rules="{ required: true, message: '电费不能为空', trigger: 'blur' }">
                <el-input placeholder="请输入电费" v-model="timeSlot.electricity" style="width:100%" :disabled="!title"/>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-button type="primary" class="mb" @click="addTimeSlot" :disabled="!title">添加时间区间</el-button>

          <el-form-item label="服务费：" prop="service">
            <el-input v-model="ruleForm.service" placeholder="请输入服务费" style="max-width: 200px;" :disabled="!title"/>
          </el-form-item>
          <el-form-item label="停车费：" prop="parking">
            <el-input v-model="ruleForm.parking" placeholder="请输入停车费" style="max-width: 200px;" :disabled="!title"/>
          </el-form-item>
          <el-form-item label="特殊备注：" prop="remarks">
            <el-input v-model="ruleForm.remarks" type="textarea" :disabled="!title"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm" :disabled="!title">创建</el-button>
            <el-button @click=resetForm :disabled="!title">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, reactive } from 'vue'
import { cityListApi } from '@/api/operation';
import { ElTree } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'

interface Tree {
  label: string,
  children?: Tree[],
  [key: string]: any; // 允许有额外的属性
}

interface RuleFormType {
    name: string,
    service: string,
    parking: string,
    remarks: string,
    date: Array<{ date1: string, date2: string, electricity: string }>
}

const treeRef = ref<InstanceType<typeof ElTree>>();
const filterText = ref('')
watch(filterText, (val) => {
  treeRef.value!.filter(val) //!确保treeRef.value存在
})

//文档写法
const defaultProps = {
  children: 'children',
  label: 'label'
}

const treeData = ref<Tree[]>([])
onMounted(async () => {
  const { data } = await cityListApi()
  treeData.value = data
})

//文档写法 过滤方法
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
}

//计费模板
const title = ref('')
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleFormType>>({
    name: [
        { required: true, message: "请输入模板名称", trigger: "blur" }
    ],
    service: [
        { required: true, message: "请输入服务费", trigger: "blur" }
    ],
    parking: [
        { required: true, message: "请输入停车费", trigger: "blur" }
    ],
})

const ruleForm = ref<RuleFormType>({
    name: "",
    service: "",
    parking: "",
    remarks: "",
    date: [
        { date1: "", date2: "", electricity: "" }
    ]
})

const addTimeSlot = () => {
    ruleForm.value.date.push({ date1: "", date2: "", electricity: "" })
}

const submitForm = () => {
  ruleFormRef.value?.validate((valid) => {
    if (valid) {
      console.log("表单提交成功!", ruleForm.value);
      
      // 表单提交成功后，清空表单
      resetForm();
      ElMessage.success("提交成功");
      title.value = '';

      // 刷新当前页面
      setTimeout(() => {
        location.reload();
      }, 500); // 500ms 延迟，避免 UI 还没显示 "提交成功" 就刷新了
    } else {
      console.log("表单提交失败!");
      return;
    }
  });
};

const handleNodeClick = (data: Tree) => {
    // console.log(data);
    if(!data.children){
        title.value = data.label
        resetForm()
    }//直到没有children才赋值
}

const resetForm = () => {
    ruleForm.value = {
        name: "",
        service: "",
        parking: "",
        remarks: "",
        date: [
            { date1: "", date2: "", electricity: "" }
        ]
    }
}
</script>
